import React from "react";
import {getMyPost} from "../../api";
import SmallCard from "./SmallCard";
import ReactQuill from "react-quill";
import styles from "./My.css"
import {WingBlank, WhiteSpace} from "antd-mobile";

export default class My extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '',
            story: [],
            detail: null
        } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount() {
        this.getData()
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image'
    ]

    handleChange(value) {
        console.log(value)
        this.setState({text: value})
    }

    render() {
        const style = {
            borderStyle: 'solid',
            borderWidth: 8,
            borderColor: '#86c4cd',
            borderRadius: 16,
        }
        return (
            <div>
                <WhiteSpace/>
                <WhiteSpace/>
                <WingBlank>
                    <div className={styles.box}>
                        <div style={{height: 100, display: 'flex', flexWrap: 'nowrap'}}>
                            {this.state.story.map(item => {
                                return (<div key={item.uuid} style={{margin: 8}} onClick={() => this.handleCardClick(item)}>
                                    <SmallCard type={item.typ}/>
                                </div>)
                            })}
                        </div>
                    </div>
                    <WhiteSpace/>
                    <WhiteSpace/>
                    {this.state.detail && <div>
                        <h2>您的发布</h2>
                        <ReactQuill value={this.state.detail.content}
                                    readOnly={true}
                                    theme='bubble'
                                    style={style}
                                    formats={this.formats}
                                    onChange={() => {
                                    }}/>
                        <WhiteSpace/>
                        <WhiteSpace/>
                        {("comment_set" in this.state.detail && this.state.detail.comment_set.length) ? <h2>所有回复</h2> :<h2>暂无回复</h2>}
                        {"comment_set" in this.state.detail && this.state.detail.comment_set.map((item, index) => {
                            return <div key={item.uuid}>
                                <ReactQuill value={item.content}
                                    // className={styles.quill}
                                            theme='bubble'
                                            style={style}
                                            readOnly={true}
                                            formats={this.formats}
                                            onChange={() => {
                                            }}/>
                                <WhiteSpace/>
                                <WhiteSpace/>
                            </div>
                        })}
                    </div>}
                </WingBlank>
            </div>
        );
    }

    handleCardClick = (item) => {
        this.setState({
            detail: item
        })
        console.log(this.state.detail)
    }
    getData = async () => {
        let res
        try {
            res = await getMyPost()
            this.setState({
                story: res.data.story
            })
        } catch (e) {
            alert("请求失败")
            console.log(e)
        }
        if (res.data.story.length) {
            console.log(res.data.story[0])
            this.handleCardClick(res.data.story[0])
        }
    }
}